<template>
  <view>
    <customtop top_title="验证码登录"></customtop>
    <view class="container">
      <view class="login">
        <form class="luck-form2" @submit="formSubmit" ref="form">
          <view class="item">
            <view class="weui-cell__bd inputbox weui-flex">
              <input
                name="phone"
                v-model="form.phone"
                class="weui-input"
                type="text"
                placeholder="手机号"
              />
            </view>
          </view>
          <view class="item luck-vcode">
            <view class="weui-cell__bd inputbox weui-flex">
              <input
                name="code"
                class="weui-input weui-cell__control weui-cell__control_flex"
                type="txt"
                placeholder="验证码"
              />
              <span class="lbtn" @click="sendCode">{{ luckSend_btnTxt }}</span>
            </view>
          </view>
          <view class="remind">
            <radio
              color="#f4645f"
              :checked="read_agreement_status"
              @click="setReadAgreement"
            />
            <view class="txt"
              >阅读并同意<span
                class="link"
                @click="jumpPage('/pages/article/show?id=3')"
                >《用户协议》</span
              ></view
            >
          </view>
          <button
            class="luckbtn luckbtn-default"
            formType="submit"
            :style="{ marginTop: '15px' }"
          >
            立即登录
          </button>
        </form>
        <view class="other_way">
          <view
            class="ow_item ow_item1"
            @click="jumpPage('/pages/account/login_password')"
            >密码登录</view
          >
          <view
            class="ow_item ow_item2"
            @click="jumpPage('/pages/account/register')"
            >立即注册</view
          >
        </view>
        <view
          class="wxapplogin none"
          :style="{ marginTop: '50px' }"
          v-if="!read_agreement_status"
          @click="showAgreementErrorMsg"
        >
          <view class="box">
            <image class="img" src="/static/images/phone.png" />
            <view class="txt">手机号快捷登录</view>
            <button class="btn">获取手机号码</button>
          </view>
        </view>
        <view
          class="wxapplogin none"
          :style="{ marginTop: '50px' }"
          v-if="read_agreement_status"
        >
          <view class="box">
            <image class="img" src="/static/images/phone.png" />
            <view class="txt">手机号快捷登录</view>
            <button
              class="btn"
              open-type="getPhoneNumber"
              @getphonenumber="decryptPhoneNumber"
            >
              获取手机号码
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js";
import customtop from "@/components/customtop.vue";

export default {
  components: { customtop },

  data() {
    return {
      form: {
        phone: "",
      },
      read_agreement_status: false,
      luckSend_btnTxt: "获取验证码",
      luckSend_seconds: 13,
      luckSend_disabled: false,
      code2seesion: "",
    };
  },

  onShow() {
    //this.wxapp_login1();
  },

  methods: {
    formSubmit(e) {
      if (!this.read_agreement_status) {
        uni.showToast({ icon: "none", title: "请先阅读并同意协议" });
        return false;
      }
      uni.showLoading();
      let params = e.detail.value;
      params.code2seesion = this.code2seesion;
      request.post("/account/login", params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.setStorageSync("user_token", res.data.user_token);
          uni.showToast({
            title: "登录成功",
            duration: 1500,
            success: function () {
              setTimeout(function () {
                uni.switchTab({ url: "/pages/tabbar/my" });
              }, 1500);
            },
          });
        } else if (res.code == 400) {
          uni.showToast({ title: res.message, icon: "none" });
        }
      });
    },

    sendCode: function () {
      if (this.luckSend_disabled) return false;
      uni.showLoading({});
      request
        .post("/account/sendCode", { phone: this.form.phone })
        .then((res) => {
          uni.hideLoading();
          if (res.code == 200) {
            this.luckSend_disabled = true;
            let timer = setInterval(() => {
              this.luckSend_btnTxt = this.luckSend_seconds + "秒再重试";
              this.luckSend_seconds--;
              if (this.luckSend_seconds === 0) {
                clearInterval(timer);
                this.luckSend_btnTxt = "发送验证码";
                this.luckSend_seconds = 13;
                this.luckSend_disabled = false;
              }
            }, 1000);
            uni.hideLoading();
            uni.showToast({ icon: "none", title: "验证码已发送" });
          } else if (res.code == 400) {
            uni.showToast({ title: res.message, icon: "none" });
          }
        });
    },

    setReadAgreement: function (e) {
      let a = this.read_agreement_status ? false : true;
      this.read_agreement_status = a;
    },

    wxapp_login1: function () {
      let that = this;
      uni.login({
        success: function (loginRes) {
          if (loginRes.code) {
            uni.showLoading();
            request
              .post("/account/wxapp_login1", { code: loginRes.code })
              .then((res) => {
                uni.hideLoading();
                // 异常
                if (res.code == 400) {
                  uni.showToast({
                    title: res.message,
                    icon: "none",
                  });
                  return false;
                }
                // 成功
                that.code2seesion = res.data.code2seesion;
              });
          } else {
            console.log(loginRes);
            uni.showToast({
              title: "登录失败",
              icon: "none",
            });
          }
        },
      });
    },

    showAgreementErrorMsg: function () {
      uni.showToast({ icon: "none", title: "请先阅读并同意协议" });
      return false;
    },

    decryptPhoneNumber: function (e) {
      var that = this;
      // 用户取消授权
      if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
        uni.showToast({ title: "取消授权", icon: "none" });
        return false;
      }
      // 邀请用户ID
      let inviteUserId = uni.getStorageSync("inviteUserId");
      let params = {};
      params.inviteUserId = inviteUserId;
      params.iv = e.detail.iv;
      params.encryptedData = e.detail.encryptedData;
      params.code2seesion = that.code2seesion;
      uni.showLoading({ title: "登录中" });
      request.post("/account/wxapp_login2", params).then((res) => {
        uni.hideLoading();
        // 异常
        if (res.code == 400) {
          uni.showToast({ title: res.message, icon: "none" });
          return false;
        }
        // 成功
        uni.setStorageSync("user_token", res.data.user_token);
        //uni.navigateBack({ delta: 1 });
        uni.switchTab({ url: "/pages/account/index" });
        // 通知来源页 loginSuccess()
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];
        if (prevPage.loginSuccess != undefined) {
          prevPage.loginSuccess();
        }
      });
    },

    jumpPage: function (url) {
      uni.navigateTo({ url: url });
    },
  },
};
</script>

<style>
@import url("account.css");
page {
  background-color: #fff;
}
.ubtn {
  padding: 5px !important;
}
</style>
